import './article.less';

import React, {
  useEffect,
  useState,
} from 'react';

import {
  ArticleModelState,
  Link,
  useDispatch,
  useSelector,
} from 'umi';

import ArticleTag from '@/components/articleTag/articleTag';
import RecommendedReading
  from '@/components/recommendedReading/recommendedReading';
import _ from '@umijs/deps/compiled/lodash';

interface Props { }

function Article(props: Props) {
  const { } = props
  let dispatch = useDispatch()
  let { articleList, articleListPage2, allRecommendItem } = useSelector((state: { article: ArticleModelState }) => state.article)
  const [page, setPage] = useState(1)
  useEffect(() => {
    dispatch({
      type: 'article/getArticleList',
      payload: 1
    })
    dispatch({
      type: 'article/allRecommend'
    })
  }, [])
  console.log(allRecommendItem);
  let li = [{ name: '所有', url: "article" }, { name: '前端', url: "front" }, { name: '后端', url: "be" }, { name: '阅读', url: "reading" }, { name: 'Linux', url: "linux" }, { name: 'LeetCode', url: "leetcode" }, { name: '要闻', url: "news" },]
  const [ind, setInd] = useState(0)
  let tabs = (item: { name: string, url: string }, index: number) => {
    setInd(index)
    localStorage.setItem('ind', JSON.stringify(index))
    localStorage.setItem('tabsName', item.name)
  }
  window.onscroll = function () {
    //scrollTop是滚动条滚动时，距离顶部的距离
    //为了保证兼容性，这里取两个值，哪个有值取哪一个
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //windowHeight是可视区的高度
    let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //scrollHeight是滚动条的总高度
    // let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    if (scrollTop > windowHeight * 1.5) {
      setTimeout(() => {
        if (articleListPage2.length == 0) {
          dispatch({
            type: 'article/getArticleListPage2',
            payload: 2
          })
        }
      }, 1000);
    }
    // //滚动条到底部的条件
    // if ((scrollTop + windowHeight) == scrollHeight) {
    //   //到了这个就可以进行业务逻辑加载后台数据了
    //   console.log(111);

    // }
  }
  let toEdit = () => {

  }
  return (
    <div className='app-article'>
      <div className='article-left'>
        <div className='article-lef-top'>
          <img className='article-lef-top-img' src={allRecommendItem.cover} alt="" />
        </div>
        <div className='article-lef-list'>
          <div className='article-Tab'>
            <ul className='article-Tab-ul'>
              {
                li && li.map((item, index) => {
                  return <Link key={index} to={index !== 0 ? `/category/${item.url}` : "article"} onClick={tabs.bind(_, item, index)} id={'article-Tab-ul-li'} className={index == ind ? 'article-Tab-ul-hotpink' : "article-Tab-ul-000"}> {item.name}</Link>
                })
              }
            </ul>
            <div>
              {
                articleList && articleList.map((item: any, index: number) => {
                  return <ul key={index} className='article-main-ul' onClick={toEdit}>
                    <Link className='article-Tab-main-li ' to={`/article/${item.id}`} >
                      <div className='article-Tab-main-li-div'>
                        <h3 className='article-Tab-main-li-div-h3'>{item.title}</h3> <span>6个月前</span>
                      </div>
                      <dl className='article-Tab-main-li-dl' >
                        <dt className='article-Tab-main-li-dt'>
                          <img src={item.cover} alt="" />
                        </dt>
                        <dd className='article-Tab-main-li-dd'>
                          <div>
                            <p className='article-Tab-main-li-dd-p'>{item.summary}</p>
                            <div className='article-Tab-main-li-dd-div'>
                              <span className='article-Tab-main-li-dd-div-span'> ❤{item.likes}</span> <span> 👁 {item.views}</span> <span> 🔗 分享</span>
                            </div>
                          </div>
                        </dd>
                      </dl>
                    </Link>
                  </ul>
                })
              }
              {
                articleListPage2 && articleListPage2.map((item: any, index: number) => {
                  return <ul key={index} className='article-main-ul'>
                    <li className='article-Tab-main-li ' >
                      <div className='article-Tab-main-li-div'>
                        <h3 className='article-Tab-main-li-div-h3'>{item.title}</h3> <span>6个月前</span>
                      </div>
                      <dl className='article-Tab-main-li-dl' >
                        <dt className='article-Tab-main-li-dt'>
                          <img src={item.cover} alt="" />
                        </dt>
                        <dd className='article-Tab-main-li-dd'>
                          <div>
                            <p>{item.summary}</p>
                            <div className='article-Tab-main-li-dd-div'>
                              <span className='article-Tab-main-li-dd-div-span'> ❤{item.likes}</span> <span  className='article-Tab-main-li-dd-div-span'> 👁 {item.views}</span> <span  className='article-Tab-main-li-dd-div-span'> 🔗 分享</span>
                            </div>
                          </div>
                        </dd>
                      </dl>
                    </li>
                  </ul>
                })
              }
            </div>
          </div>
        </div>
      </div>
      <div className='article-right'>
        <div>
          <RecommendedReading></RecommendedReading>
        </div>
        <div>
          <ArticleTag></ArticleTag>
        </div>
      </div>
    </div>
  )
}

export default Article
